<template>
  <div>
    <div>
      <el-button @click="addData">添加数据</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="date"
        label="日期"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      >
        <template slot-scope="scope">
          <span v-if='scope.row.isSet'>
            <el-input
              v-model="scope.row.name"
              placeholder=""
            ></el-input>
          </span>
          <span v-else>
            <span>{{scope.row.name}}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
      >
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <template v-if='scope.row.isSet'>
            <el-button @click="scope.row.isSet == false">保存</el-button>
            <el-button @click="cancelEdit(scope.row)">取消</el-button>
          </template>
          <template v-else>
            <el-button @click="edit(scope.row)">修改</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    edit(row) {
      row.isSet = true
      // this.tableData.findX([{ id: row.id }]).isSet = true
    },
    cancelEdit(row) {
      this.tableData.findX([{ id: row.id }]).isSet = false
    },
    addData() {
      this.tableData = [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        isSet: false
      }]
    }
  }
}
</script>
